<template>
    <div class="header-pages">
        <header class="header">
            <a class="logo" href="/"><img src="../../assets/images/data-logo.png"/></a>
            <a class="menu iconfont icon-menu" id="menu" href="javascript:;" @click="menuBtn"></a>
        </header>
        <nav class="navigate-body" js-plugin="slide" data-direction="vertical" id="navigate" :style="{ transform: navStyle }">
            <div class="navigate" data-number="0">
                <a class="items login" @click="toUser">
                    <i class="icon iconfont icon-gerenzhongxin"></i>
                    <span class="txt js-navLogin">{{ txt }}</span>
                </a>
                <router-link class="items" to='/'>
                    <i class="icon iconfont icon-home"></i>
                    <span class="txt">首页</span>
                </router-link>
                <router-link class="items" to="/houseList/0">
                    <i class="icon iconfont icon-newhouse"></i>
                    <span class="txt">租厂房</span>
                </router-link>
                <router-link class="items" to="/houseList/1">
                    <i class="icon iconfont icon-rent"></i>
                    <span class="txt">买厂房</span>
                </router-link>
                 <router-link class="items" to="/landList">
                    <i class="icon iconfont icon-quanbuloupan"></i>
                    <span class="txt">买土地</span>
                </router-link>
                <router-link class="items" to="/buildList">
                    <i class="icon iconfont icon-zuixinkaipan"></i>
                    <span class="txt">写字楼</span>
                </router-link>
                <router-link class="items" to="/data">
                    <i class="icon iconfont icon-xinfangdaogou"></i>
                    <span class="txt">供需大数据</span>
                </router-link>
                <a class="items" href="##">
                    <i class="icon iconfont icon-fangjia"></i>
                    <span class="txt">发布厂房</span>
                </a>
                <router-link class="items" to="/news/detail/1">
                    <i class="icon iconfont icon-about"></i>
                    <span class="txt">联系阿力士</span>
                </router-link>
            </div>
        </nav>
        <div class="overlay" v-if="menuOpen" @click="menuClose"></div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                menuOpen: false,
                navStyle: 'translateX(100%)',
                txt:'登录/注册'
            };
        },
        created(){
            if(localStorage.getItem('token')){
                this.txt = '个人中心'
            }else{
                this.txt = '登录/注册'
            }
        },
        methods: {
            menuBtn() {
                this.menuOpen = true;
                this.navStyle = 'translate3d(0px, 0px, 0px)';
            },
            menuClose() {
                this.filter = false;
                this.menuOpen = false;
                this.orederby = 'none';
                this.navStyle = 'translateX(100%)';
            },
            getTitle(val) {
                this.title = val;
            },
             toUser(){
                if (localStorage.getItem('token')) {
                    this.$router.push('/user')
                }else{
                    this.$router.push('/login')
                }
            }
        }
    };
</script>

<style scoped>
 /*@import '../../assets/css/sale-list.css';*/
 .header {background-color: #202124;color: #fff;padding: 0 15px;overflow: hidden;height: 50px;}
 .header .logo {float: left;padding: 7px 0;}
 .header .logo img {display: block;height: 36px;width: auto;}
 .header .menu {float: right;color: #fff;font-size: 18px;line-height: 1;padding: 15px 0;}

 .navigate-body {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 45%;
     z-index: 5000;
     background-color: #fff;
     overflow: hidden;
     -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
     transform: translateX(100%)
 }

 .navigate-body .items {
     display: -webkit-flex;
     display: flex;
     -webkit-align-items: center;
     align-items: center;
     padding: 12px 30px;
     font-size: 16px;
     color: #333;
     line-height: 1.2;
     box-sizing: border-box
 }

 .navigate-body .items .icon {
     display: block;
     margin-right: 15px;
     font-size: 20px;
     color: #b2b2b2
 }

 .navigate-body .items .icon:before {
     display: block;
     width: 20px;
     height: 20px;
     overflow: hidden
 }

 .navigate-body .items .txt {
     display: block
 }

 .navigate-body .login, .navigate-body .user {
     margin-bottom: 20px;
     padding: 20px 30px;
     border-bottom: 1px solid #f0f0f0
 }

 .navigate-body .user .pic {
     display: block;
     width: 40px;
     height: 40px;
     margin-right: 10px;
     border-radius: 50%;
     overflow: hidden
 }
 .overlay {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1000;
     display: block !important;
     background-color: rgba(0, 0, 0, .3)
 }
</style>

